<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title site-demo-title">
        <li class="layui-this i18n-new-proxy"></li>
    </ul>
    <div class="main-content">
      <div class="layui-form-item">
	    <label class="layui-form-label i18n-lan-name"></label>
	    <div class="layui-input-block">
	      <input type="text" name="name" autocomplete="off" placeholder="" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
        <label class="layui-form-label i18n-lan-inetport"></label>
        <div class="layui-input-block">
          <input type="text" name="inetPort" autocomplete="off" placeholder="" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label i18n-lan-ip"></label>
        <div class="layui-input-block">
          <input type="text" name="lan" autocomplete="off" placeholder="" class="layui-input">
        </div>
      </div>
       <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn add"></button>
	      <button class="layui-btn layui-btn-primary back"></button>
	    </div>
	  </div>
    </div>
</div>
<script>
$(".i18n-new-proxy").html($.i18n.prop('lan.addnewconfig'));
$(".i18n-lan-name").html($.i18n.prop('lan.name'));
$(".i18n-lan-inetport").html($.i18n.prop('lan.inetport'));
$(".i18n-lan-ip").html($.i18n.prop('lan.ip'));
$("input[name='inetPort']").attr("placeholder", $.i18n.prop('lan.inetport.placeholder'));
$("input[name='lan']").attr("placeholder", $.i18n.prop('lan.ip.placeholder'));
$(".add").html($.i18n.prop('public.submit'));
$(".back").html($.i18n.prop('public.back'));
$(".add").click(function(){
    var name = $("input[name='name']").val();
    if(name == ""){
    	layer.alert($.i18n.prop('lan.notice.inputname'), {title:"Tips"});
    	return;
    }
    var inetPort = $("input[name='inetPort']").val();
    if(inetPort == ""){
        layer.alert($.i18n.prop('lan.notice.inputinetport'), {title:"Tips"});
        return;
    }
    if(!check_port(inetPort)){
    	layer.alert($.i18n.prop('lan.notice.errorport'), {title:"Tips"});
    	return;
    }

    var lan = $("input[name='lan']").val();
    if(lan == ""){
        layer.alert($.i18n.prop('lan.notice.inputlan'), {title:"Tips"});
        return;
    }
    if(!check_lan(lan)){
        layer.alert($.i18n.prop('lan.notice.errorlan'), {title:"Tips"});
        return;
    }

    clientList[clientIndex].proxyMappings.push({
    	name:name,
    	inetPort:inetPort,
    	lan:lan
    });

    api_invoke("/config/update", clientList, function(data) {
        if (data.code == 20000) {
            layer.alert($.i18n.prop('public.notice.addsuccess'), {title:"Tips"}, function(index){
                layer.close(index);
                load_page("html/lan/list.html");
            }); 
        }
    });
});

$(".back").click(function(){
	load_page("html/lan/list.html");
});
</script>